<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略！
        function debouce(fn, time) {
            let timer = null
            return () => {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.apply(this, arguments);
                }, time)
            }
        }
        //节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
        function throttle(fn, time) {
            let activeTime = 0
            return () => {
                let currentTime = Date.now()
                if (currentTime - activeTime > time) {
                    fn.apply(this, arguments)
                    activeTime = Date.now()
                }
            }
        }
        function throttleTwo(fn, time) {
            let timer = null
            return () => {
                if (timer) return
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = null
                }, time)
            }
        }
    </script>
</body>

</html>